<template>
	<view class="page-home">
		<view class="search">
			<view class="input" @tap="toSearch">
				<cl-input prefix-icon="cl-icon-search" :placeholder="hotTitle"></cl-input>
			</view>
			<image src="/static/icon/message.png" />
		</view>
		<cl-sticky is-topbar>
			<view class="tabs">
				<cl-tabs
					v-model="active"
					:labels="tabs"
					justify="start"
					unColor="#999999"
					show-dropdown
					:border="false"
				>
				</cl-tabs>
			</view>
		</cl-sticky>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @tap="toDetail">
				<view class="det">
					<view class="title">
						<cl-text
							:value="item.title"
							color="#000000"
							:size="32"
							:ellipsis="2"
						></cl-text>
					</view>
					<view class="count">
						<view class="is-top" v-if="item.isTop">置顶</view>
						<view class="count-item">{{ item.comment }}评</view>
						<view class="count-item">{{ item.time }}小时前</view>
					</view>
				</view>
				<view class="cover">
					<image :src="item.cover" mode="" />
				</view>
			</view>
		</view>
		<view class="hot">
			<view class="hot-head">
				<view class="tag">热点</view>
				<cl-text :value="`实时更新于${hotTime}`" color="#999999" :size="22"></cl-text>
			</view>

			<view class="hot-list">
				<view class="item" v-for="(item, index) in hot" :Key="index">
					<cl-text
						:value="item.title"
						color="#333333"
						:size="36"
						:margin="[0, 0, 30, 0]"
						:ellipsis="1"
					></cl-text>
				</view>
			</view>
		</view>
		<view class="publish">
			<view class="open" @tap="onOpen">
				<image :src="open" />
			</view>
			<view class="popup">
				<cl-popup :visible.sync="visible" size="90%" :padding="36" direction="center">
					<view class="publish-list">
						<view
							class="item"
							v-for="(item, index) in publish"
							:key="index"
							@tap="toPublish"
						>
							<view class="icon">
								<image :src="item.icon" mode="aspectFit" />
							</view>
							<view class="name">
								{{ item.name }}
							</view>
						</view>
					</view>
				</cl-popup>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hotTitle: "热搜：热搜内容标题",
			active: "attention",
			tabs: [
				{ label: "关注", name: "attention" },
				{ label: "推荐", name: "recom" },
				{ label: "推荐", name: "recom" },
				{ label: "财经", name: "finance" },
				{ label: "娱乐", name: "entertainment" },
				{ label: "搞笑", name: "funny" },
				{ label: "军事", name: "military" },
				{ label: "商务", name: "business" },
			],
			list: [
				{
					title: "卫生间装修不要犯这样的错误不然入住后就得重装，一点不实用",
					cover: require("@/static/images/hom-cover.png"),
					isTop: true,
					comment: 1278,
					time: 10,
				},
				{
					title: "卫生间装修不要犯这样的错误不然入住后就得重装，一点不实用",
					cover: require("@/static/images/hom-cover.png"),
					isTop: false,
					comment: 1278,
					time: 10,
				},
				{
					title: "卫生间装修不要犯这样的错误不然入住后就得重装，一点不实用",
					cover: require("@/static/images/hom-cover.png"),
					isTop: true,
					comment: 1278,
					time: 10,
				},
				{
					title: "卫生间装修不要犯这样的错误不然入住后就得重装，一点不实用",
					cover: require("@/static/images/hom-cover.png"),
					isTop: false,
					comment: 1278,
					time: 10,
				},
			],
			hot: [
				{ title: "某某：对地区暴力事件十分痛心" },
				{ title: "全市启动雷雨警告，注意出行某某明星婚期已定" },
				{ title: "某某：对地区暴力事件十分痛心" },
				{ title: "全市启动雷雨警告，注意出行某某明星婚期已定" },
			],
			hotTime: "15:09",
			open: require("@/static/icon/publish.png"),
			visible: false,
			publish: [
				{ icon: require("@/static/icon/publish1.png"), name: "图文" },
				{ icon: require("@/static/icon/publish2.png"), name: "小视频" },
				{ icon: require("@/static/icon/publish3.png"), name: "提问" },
				{ icon: require("@/static/icon/publish4.png"), name: "爆料" },
			],
		};
	},
	methods: {
		toSearch() {
			uni.navigateTo({
				url: "/pages/search/index",
			});
		},
		toDetail() {
			uni.navigateTo({
				url: "/pages/news/detail",
			});
		},
		onOpen() {
			this.visible = true;
		},
		toPublish() {
			this.visible = false;
			uni.navigateTo({
				url: "/pages/publish/index",
			});
		},
	},
};
</script>

<style lang="scss">
.page-home {
	.search {
		display: flex;
		align-items: center;
		width: 100%;
		height: 123rpx;
		padding: 0 35rpx;
		background-color: #f95859;
		box-sizing: border-box;

		.input {
			flex: 1;
		}

		image {
			width: 38rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}
	.tabs {
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #eee;

		/deep/.cl-tabs {
			&__dropdown {
				color: #000;
			}
		}
	}
	.list {
		width: calc(100% - 60rpx);
		padding-top: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
		margin: 0 30rpx;
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 38rpx;
			.det {
				margin-right: 66rpx;
				flex: 1;
				/deep/.cl-text {
					line-height: 40rpx;
				}
				.count {
					display: flex;
					align-items: center;
					margin-top: 33rpx;
					.is-top {
						width: 75rpx;
						height: 32rpx;
						margin-right: 20rpx;
						background-color: #f95859;
						color: #f5c7cc;
						border-radius: 16rpx;
						font-size: 22rpx;
						text-align: center;
					}
					&-item {
						margin-right: 20rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.cover {
				width: 205rpx;
				height: 147rpx;
				border-radius: 8rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.hot {
		width: calc(100% - 60rpx);
		margin: 33rpx 30rpx 0 30rpx;
		&-head {
			display: flex;
			.tag {
				width: 76rpx;
				height: 39rpx;
				margin-right: 15rpx;
				margin-bottom: 31rpx;
				background: #d43c3d;
				border-radius: 4rpx;
				color: #fff;
				text-align: center;
				line-height: 39rpx;
				font-size: 28rpx;
			}
		}
		&-list {
			.item {
				position: relative;
				padding-left: 35rpx;
				::after {
					content: "";
					display: inline-block;
					position: absolute;
					top: 20rpx;
					left: 0;
					width: 9rpx;
					height: 9rpx;
					background-color: #3c4166;
					border-radius: 50%;
					z-index: -1;
				}
			}
		}
	}
	.publish {
		.open {
			position: fixed;
			right: 30rpx;
			bottom: 130rpx;
			width: 120rpx;
			height: 120rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.popup {
			/deep/.cl-popup {
				border-radius: 50rpx;
			}
		}
		&-list {
			display: flex;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 6rpx;
					image {
						max-width: 64rpx;
						max-height: 57rpx;
					}
				}
				.name {
					font-size: 22rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
}
</style>
